<template>
  <el-dialog :visible.sync="visible" :title="title" width="600px" :close-on-click-modal="false">
    <VForm :fieldList="fieldList" label-width="90px" ref="form" v-model="formData"></VForm>
    <div slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="$wait.is('account.user.*User')">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import VForm from '@/components/VForm';
import { getCheckSameValueValidator } from '@/utils/validator';

export default {
  components: {
    VForm,
  },
  data() {
    return {
      visible: false,
      type: 'add',
      formData: {},
    };
  },

  computed: {
    fieldList() {
      const { type } = this;
      const fieldList = [
        {
          type: 'input',
          label: '用户名',
          model: 'userName',
          props: {
            placeholder: '请输入用户名',
            maxlength: 30,
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请输入用户名',
            },
          ],
        },
        {
          type: 'input',
          label: '姓名',
          model: 'userShowName',
          props: {
            placeholder: '请输入姓名',
            maxlength: 30,
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请输入姓名',
            },
          ],
        },
        {
          type: 'input',
          label: '密码',
          model: 'userPwd',
          props: {
            type: 'password',
            showPassword: true,
            placeholder: '请输入密码',
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请输入密码',
            },
          ],
        },
        {
          type: 'input',
          label: '确认密码',
          model: 'confirmPwd',
          props: {
            type: 'password',
            showPassword: true,
            placeholder: '请确认密码',
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请确认密码',
            },
            {
              validator: getCheckSameValueValidator(
                value => (this.formData.userPwd ? value === this.formData.userPwd : true),
                '两次输入的密码不一致'
              ),
            },
          ],
        },
        {
          type: 'cascader',
          model: 'deptId',
          label: '部门',
          props: {
            placeholder: '请选择部门',
            props: {
              checkStrictly: true,
              value: 'id',
              label: 'deptName',
              children: 'children',
              emitPath: false,
              expandTrigger: 'hover',
            },
            options: resovle => {
              this.$api.account.department.getDepartmentTree().then(({ data }) => {
                resovle(data);
              });
            },
            clearable: true,
            filterable: true,
            showAllLevels: true,
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请选择部门',
            },
          ],
        },
        {
          type: 'input',
          model: 'userTelphone',
          label: '电话',
          props: {
            placeholder: '请输入电话',
          },
          col: {
            span: 12,
          },
          rules: [
            {
              required: true,
              message: '请输入电话',
            },
          ],
        },
      ];

      if (type === 'edit') {
        fieldList.splice(2, 2);
      }

      return fieldList;
    },
    title() {
      const { type } = this;
      return `${type === 'edit' ? '编辑' : '新增'}用户`;
    },
  },

  methods: {
    show(type = 'add', model) {
      this.visible = true;

      this.type = type;

      this.$nextTick(() => {
        this.reset();
        if (this.type === 'edit') {
          this.formData = {
            ...model,
          };
        }
      });
    },

    close() {
      this.visible = false;
    },

    reset() {
      this.formData = {};
      this.$refs.form && this.$refs.form.resetFields();
    },

    async handleSubmit() {
      const { type } = this;
      const params = await this.$refs.form.submit();
      await this.$api.account.user[`${type}User`](params);

      this.$message.success('保存成功！');
      this.close();

      this.$emit('submit');
    },
  },
};
</script>

<style lang="scss" scoped></style>
